<template>
  <div class="one-map">
    <TheMap ref="commmap" />
    <Tool @btnClick="drawArea" />
  </div>
</template>

<script>
  import TheMap from './comp/theMap.vue';
  import Tool from './comp/tool.vue';

  export default {
    components: {
      TheMap,
      Tool
    },
    data() {
      return {
        colorRange: [],
        showLegend: false
      };
    },
    methods: {
      drawArea(type) {
        switch (type) {
          case 'spot':
            this.curClear();
            this.$refs.commmap.addSpot();
            break;
          case 'clear':
            this.curClear();
            break;
          case 'reset':
            this.curClear();
            this.$refs.commmap.toBounds();
            break;
          default:
            break;
        }
      },
      curClear() {
        this.showLegend = false;
        this.$refs.commmap.clearAll();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .one-map {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style> 